<template>
  <div class="single-component" @keyup.enter="FuncSerach">
    <div class="clumn-layout">
      <LabelInput v-model:input-value="formData.projectName" labelName="全文检索：" :inputWidth="20"
                  placeholder="请输入查找项目关键字进行全文检索"/>
      <div class="label-select margin-left">
        <div class="label-style">
          制片年份:
        </div>
        <div class="select-style">
          <a-range-picker picker="year"
                          v-model:value="formList.yearOfProduction"
                          :defaultPickerValue="formList.defaultPickerValue"
          ></a-range-picker>
        </div>
      </div>
      <a-button class="margin-left_50" type="primary" @click="FuncSerach">
        <template #icon>
          <SearchOutlined/>
        </template>
        查询
      </a-button>
      <a-button class="margin-left_20" type="primary" @click="fnClearSearchValue">
        <template #icon>
          <SearchOutlined/>
        </template>
        重置
      </a-button>
    </div>

    <div class="clumn-layout margin-top_17">
      <LabelSelect labelName="项目类别：" :selectOptions="formList.typesOptions" placeholder="请选择类别" :inputWidth="20"
                   v-model:selected-value="formData.subType" @selectedChangeFunc="changefunc"
      />
      <LabelDatePicker class="margin-left" labelName="抓取时间：" v-model:select-date-range="formList.selectDateRange"/>
    </div>
    <div class="clumn-layout margin-top_17">
      <LabelSelect labelName="是否推送：" v-model:selected-value="formData.status"
                   :selectOptions="formList.pushStatusOptions" placeholder="请选择风格"/>
    </div>

    <div class="clumn-layout margin-top_40">
      <a-button type="primary" @click="exportFunc" v-track="'项目展示点击导出Excel'">
        <template #icon>
          <SearchOutlined/>
        </template>
        项目导出
      </a-button>
      <a-button class="margin-left_20" type="primary" @click="fnBatchPush('pro')" v-track="'项目展示批量推送'">
        <template #icon>
          <cloud-upload-outlined style="font-size: 16px"/>
        </template>
        批量推送
      </a-button>
      <a-button class="margin-left_20" type="primary" @click="fnBatchPush('test')" v-track="'项目展示批量推送'">
        <template #icon>
          <cloud-upload-outlined style="font-size: 16px"/>
        </template>
        推送测试
      </a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs, {Dayjs} from 'dayjs';
import {inject, reactive} from "vue";
import {message} from "ant-design-vue";
import {post, get} from "@/service/request";

const {location, updateLocation} = inject<string | Function>(
    "location"
) as any;
const {tableSelectChangeRowKeys, updateSelectChangeRowKeys} = inject(
    "showTableProvide"
) as any;

const formList = reactive({
  selectDateRange: [],
  defaultPickerValue: [dayjs('2010', 'YYYY'), dayjs('2023', 'YYYY')],
  yearOfProduction: [],
  pushStatusOptions: [
    {value: 0, label: "未推送"},
    {value: 1, label: "已推送"},
  ] as any[],
  typesOptions: [
    {value: "电影", label: "电影"},
    {value: "电视剧", label: "电视剧"},
    {value: "综艺", label: "综艺"},
    {value: "动画", label: "动画"},
    {value: "纪录片", label: "纪录片"},
    {value: "短剧", label: "短剧"}
  ] as any[],
});
const props = defineProps({
  projectName: String,
  formData: {
    type: Object,
    default: {
      projectName: "",
      creatDateStart: "",
      creatDateEnd: "",
      status: "",
      subType: "",
      yearOfProductionStart: '',
      yearOfProductionEnd: '',
    }
  },
});


const changefunc = (value: any) => {
  console.log("changefunc", value)
};

const fnClearSearchValue = () => {
};

const emits = defineEmits(['searchChangeFn']);


const buildDataFunc = () => {
  props.formData.creatDateStart = formList.selectDateRange && formList.selectDateRange.length > 1 ? dayjs(formList.selectDateRange[0]).format('YYYY-MM-DD 00:00:00') : ""
  props.formData.creatDateEnd = formList.selectDateRange && formList.selectDateRange.length > 1 ? dayjs(formList.selectDateRange[1]).format('YYYY-MM-DD hh:mm:ss') : ""
  props.formData.yearOfProductionStart = formList.yearOfProduction && formList.yearOfProduction.length > 1 ? dayjs(formList.yearOfProduction[0]).format('YYYY') : ""
  props.formData.yearOfProductionEnd = formList.yearOfProduction && formList.yearOfProduction.length > 1 ? dayjs(formList.yearOfProduction[1]).format('YYYY') : ""
}
const FuncSerach = () => {
  buildDataFunc()
  emits("searchChangeFn", props.formData)
};


const exportFunc = () => {
  buildDataFunc()
  post(`/mediaExport/export`, props.formData).then((res: any) => {
    if (res.errCode == 0) {
      message.success('导出成功, 请稍等几分钟前往下载中心查看');
    } else {
      message.warning(res.msg);
    }
  });
}
const pushCheck = () => {
  if ((tableSelectChangeRowKeys.length = 0)) {
    message.warn("推送记录不能为空！");
    return false;
  }
  return true;
};
const fnBatchPush = (type: any) => {
  const postParam = {
    idList: tableSelectChangeRowKeys.value,
    type: type,
  };
  if (pushCheck()) {
    post(`/mediaItem/push`, postParam).then((res: any) => {
      if (res.errCode == 0) {
        message.success("推送成功！");
      } else {
        message.warn(res.msg);
      }
    });
  }
};
</script>
<style lang="less" scoped>
.single-component {
  width: 100%;
  padding: 10px;

  .clumn-layout {
    display: flex;
    align-items: center;
  }
}

.margin-left {
  margin-left: 40px;
}

.label-select {
  height: 32px; // 默认输入框高度为32px
  display: flex;
  align-items: center;

  .select-style {
    margin-left: 20px;
  }

  //:deep(.ant-select-selector) {
  //  text-align: left;
  //}
}
</style>

<style lang="less" scoped>
@import "@/style/page.less";
</style>